import React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { 
  faHome, 
  faChartLine, 
  faPlus, 
  faUsers,
  faUser,
  faListCheck 
} from '@fortawesome/free-solid-svg-icons';

const BottomNavigation: React.FC = () => {
  const router = useRouter();
  
  // 检查当前路径确定哪个导航项处于活动状态
  const isActive = (path: string) => router.pathname === path;
  
  return (
    <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 px-6 py-2">
      <div className="flex justify-between items-center">
        <Link href="/" 
          className={`flex flex-col items-center ${isActive('/') ? 'text-primary' : 'text-gray-400'}`}>
          <FontAwesomeIcon icon={faHome} className="text-xl" />
          <span className="text-xs mt-1">首页</span>
        </Link>
        
        <Link href="/data" 
          className={`flex flex-col items-center ${isActive('/data') ? 'text-primary' : 'text-gray-400'}`}>
          <FontAwesomeIcon icon={faChartLine} className="text-xl" />
          <span className="text-xs mt-1">数据</span>
        </Link>
        
        <div className="relative -mt-5">
          <button className="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-indigo-600 flex items-center justify-center shadow-lg text-white">
            <FontAwesomeIcon icon={faPlus} className="text-xl" />
          </button>
        </div>
        
        <Link href="/plan" 
          className={`flex flex-col items-center ${isActive('/plan') ? 'text-primary' : 'text-gray-400'}`}>
          <FontAwesomeIcon icon={faListCheck} className="text-xl" />
          <span className="text-xs mt-1">计划</span>
        </Link>
        
        <Link href="/community" 
          className={`flex flex-col items-center ${isActive('/community') ? 'text-primary' : 'text-gray-400'}`}>
          <FontAwesomeIcon icon={faUsers} className="text-xl" />
          <span className="text-xs mt-1">社区</span>
        </Link>
        
        <Link href="/profile" 
          className={`flex flex-col items-center ${isActive('/profile') ? 'text-primary' : 'text-gray-400'}`}>
          <FontAwesomeIcon icon={faUser} className="text-xl" />
          <span className="text-xs mt-1">我的</span>
        </Link>
      </div>
    </div>
  );
};

export default BottomNavigation; 